<template>
 <view class="basic tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

	<view class="search-box tn-pl-sm tn-pr-lg bottom-search" @click="search()">
		<text class="tn-icon-search icon"></text>
		<text class="tn-pl-sm" style="color: #c8c9cc;">搜索</text>
	</view>
	
	<view style="margin-top: 28rpx;">
		<tn-swiper :height="swiperHeight" :list="advList"  :radius="10" ></tn-swiper>
	</view>
	
	
	<view class="main_title">
		<span>热门板块</span>
		<span class="tn-float-right">查看全部 >></span>
	</view>
	
  <view class="flex00 tn-margin-top-sm">
	<view class="flex-2 ">
	  <view v-for="(item,key) in list" :key="key" @tap="trunSpaceCate(item.id)" class="tn-radius10 width-2  heightSmall" :style="{ backgroundImage: 'url(' + item.image + ');' }"></view>
	</view>
  </view>

  <view class="tn-margin-top" v-for="(item,key) in list" :key="key">
	<view class="main_title mentor_title">
		<span>{{item.name}}</span>
		<span class="tn-float-right" @tap="trunSpaceCate(item.id)">查看全部 >></span>
	</view>
	<view class="mentor_list tn-margin-top-sm" v-for="(mentor,sIndex) in item.mentor" :key="sIndex" @tap="detail(mentor)">
		<view class="logo" :style="{ backgroundImage: 'url(' + mentor.avatar + ');'}"></view>
		<view class="right">
			<view class="title">
				<span style="margin-right: 20rpx;">{{mentor.nickname}}</span>
				<span  v-for="label in mentor.labelsName" class="title-tag">{{label}}</span>
			</view>
			<view class="en">{{mentor.enname}}</view>
			
			<view class="list-tag">评分{{parseFloat(mentor.score).toFixed(1)}}</view>
			<view class="location"><i class="tn-icon-location icons"></i>距离 {{mentor.distance|| "未知"}}</view>
			<view class="footer mentor_footer">
				<view class="price">￥{{mentor.price}}</view>
				<view class="order-btn" @tap.stop="subBtn(mentor)">立即预约</view>
			</view>
		</view>
	</view>
  </view>
  
  <tn-popup @open="openPopup" @close="closePopup" v-model="show" :borderRadius="20" :customStyle="customStyle" mode="bottom" height="1038rpx">
        <view style="padding: 29rpx 7%;">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center ">
			  <view class="justify-content-item">
			    <view class="tn-flex tn-flex-col-center tn-flex-row-left" @tap="turnUrl">
			      <!-- 图标logo -->
			      <view class="logo-pic tn-shadow" >
			        <view class="logo-image">
			          <view class="tn-shadow-blur" :style="{ backgroundImage: 'url(' + selectMentor.avatar + ');width: 100%;height: 100%;background-size: cover;' }" >
			          </view>
			        </view>
			      </view>
			      <view class="tn-padding-right tn-color-white">
			        <view class="tn-padding-right tn-padding-left-sm select_nickname">
			          {{selectMentor.nickname}}
			        </view>
			        <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline select_intro">
						{{selectMentor.intro}}
					</view>
					
					<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline tn-flex select_tag">
						<view class="rightTxt">
							<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 爽约包退
						</view>
						<view class="rightTxt">
							<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 实名认证
						</view>
						<view v-if="selectMentor.file" class="rightTxt">
							<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 资质证书
						</view>
					</view>
			      </view>
			      
			    </view>
			  </view>
			</view>
			
			<view class="pop_content">
				<view class="pop_content_user">
					<view class=" tn-flex " style="justify-content: space-between;">
						<image class="alogo"  mode="aspectFit" :src="selectMentor.avatar"></image>
						<view class="alogoRight">
							<view class="tn-flex " style="justify-content: space-between;">
								<view class="sprice">￥{{selectMentor.topics[selectTag].price}}</view>
								<view @tap="detail(selectMentor)">主理人详情 > </view>
							</view>
							<view class="">
								<span style="text-decoration-line: line-through;margin-right: ;">原价：￥{{selectMentor.topics[selectTag].price}}</span>
								<span class="">现价：￥{{selectMentor.topics[selectTag].price}}</span>
							</view>
							
							<view class="" style="font-size: 12px;" >已选：{{selectMentor.topics[selectTag].name}} | {{selectMentor.topics[selectTag].times}}分钟</view>
						</view>
					</view>
				</view>
				
				<view class="pop_content_topic">
					<span @tap="selectTopic(item,index)" v-for="(item,index) in selectMentor.topics" 
					style="margin: 0 26rpx 0 0;background: #e2e0e0;color: #666;padding: 2px 3px;" 
					class="tn-radius10"
					:style="{border:index==selectTag ? '1px solid #ff6708' :'',color:index==selectTag ? '#ff6708' :'#666'}"
					>
						{{item.name}}
					</span>
					<!-- <tn-tag 
					backgroundColor="#e2e0e0"
					margin="0 26rpx 0 0"
					:fontColor="index==selectTag ? '#ff6708' :'#666'"
					:border="index==selectTag ? '1px solid #ff6708' :''"
					 v-for="(item,index) in selectMentor.topics" shape="circle"
					@tap="selectTopic(item,index)"
					>{{item.name}}</tn-tag> -->
				</view>
				
				<view class="buy tn-flex "  style="justify-content: space-between;margin-top: 31rpx;">
					<view style="font-size: 28rpx;line-height: 40px;">购买数量</view>
					<view>
						<changeNumber @forceNumber="forceNumber"></changeNumber>
					</view>
				</view>
				<view>
					<view>选择服务时间 <span style="color: #333;font-size: 12px;">({{order_date}})</span></view>
					<view>
						<long-date 
						    type="day" 
						    :openStatus="true" 
						    @select="getTime">
						</long-date>
					</view>
				</view>
			</view>
			
			<view class="footer tn-flex" style="justify-content: space-between;">
				<view>
					合计：<span class="sprice">￥{{total.toFixed(2)}}</span>
				</view>
				<view>
					<view class="btn" @tap="subOrder">确认下单</view>
				</view>
			</view>
		</view>
  </tn-popup>
	  
	  
  <TemplateLoading :active="loading"></TemplateLoading>
  <view class="tn-padding-bottom-xs"></view>

  </view>
</template>

<script>
  import {indexObj} from '@/api/mentor/index.js'
  import {fetchList} from '@/api/index/index.js'
  import TemplateLoading from '../components/loading.vue'
  import {checkLogin} from '@/util/common.js'
  import changeNumber from '@/components/change-number/change-number.vue';
  import longDate from "@/components/long-date/long-date.vue"
  import {mentorOrder} from '@/api/order/order.js'
  export default {
    name: 'mentorIndex',
	components:{TemplateLoading,changeNumber,longDate},
    data() {
      return {
		selectMentor:{},
		swiperHeight:146,
		list: [],
		loading:false,
		show:false,
		advList:[],
		selectTag:0,
		order_number:1,
		total:0,
		order_date:"请选择时间",
		customStyle:{},
		selectParam:{
			lat:"",
			lng:""
		}
      }
    },
	mounted() {
		this.initData()
		
		this.getAdv()
	},
    methods: {
		openPopup(){
			this.$emit("popStatus",1)
		},
		closePopup(){
			this.$emit("popStatus",0)
		},
		detail(item){
			uni.navigateTo({
			  url: '/pages/mentor/detail?id=' + item.id
			})
		},
		subOrder(){
			if(this.order_date == "请选择时间" || this.order_date == ""){
				uni.showToast({
					icon:'none',
					title:"请选择服务时间"
				})
				
				return false;
			}
			
			var param = {
				mentor_id:this.selectMentor.id,
				mentor_topic_id:this.selectMentor.topics[this.selectTag].id,
				order_number:this.order_number,
				order_date:this.order_date,
				coupon_id:0
			}
			
			this.loading = true
			mentorOrder(param).then(res=>{
				this.loading = false
				uni.navigateTo({
				  url: '/pages/order/pay/pay?order_sn='+res.order_sn
				})
			}, err=>{
				this.loading = false
			})
		},
		getTime(val){
			console.log(val)
			this.order_date = val.time 
		},
		initPrice(){
			if(this.selectMentor && this.selectMentor.topics && this.selectMentor.topics.length){
				var price = this.selectMentor.topics[this.selectTag].price
				this.total = price * this.order_number
			}
			
		},
		forceNumber(num){
			this.order_number = num
			
			this.initPrice()
		},
		selectTopic(item,index){
			this.selectTag = index
			this.initPrice()
		},
		subBtn(mentor){
			this.selectMentor = mentor
			this.show = true
			this.selectTag = 0
			this.order_number = 1
			
			this.initPrice()
		},
		getAdv(){
			fetchList({page:1,size:10,position:"mentor_top"}).then(res=>{
				this.advList = res.data
			})
		},
		trunSpaceCate(id){
			uni.navigateTo({
			  url: '/pages/mentor/list?cate_id='+id
			})
		},
      getRandomCoolBg() {
        return this.$tn.color.getRandomCoolBgClass()
      },
	  search(){
		  uni.navigateTo({
			url: '/pages/search/search?type=0'
		  })
	  },
	  initData(){
		  
		  var _t = this
		  uni.getLocation({
		  	success: function (res) {
		  		_t.selectParam.lat = res.latitude
		  		_t.selectParam.lng = res.longitude
				_t.selectData()
		  	},
		  	fail(err) {
		  		console.log(err)
				_t.selectData()
		  	},
		  });
		  
		  
		  
	  },
	  selectData(){
		this.loading = true
		indexObj(this.selectParam).then(res=>{
		  this.list = res
		  this.loading = false
		  
		  this.initPrice()
		},err=>{
		  this.loading = false
		})  
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.basic{
		font-family: "PingFangSCRegular";
		.submit-btn {
		  width: 100%;
		  background-color: $tn-main-orange;
		  color: #FFFFFF;
		  line-height: 105rpx;
		  font-size: 30rpx;
		  margin-top: 31rpx;
		}
	}
	.main_title{
		color: #FFFFFF;
		text-align: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.mentor_title{color: $tn-main-orange;}
	.tn-radius10{border-radius: 10rpx;}
	.heightBig{height: 382rpx;}
	.heightSmall{height: 125rpx;background-size: contain;background-repeat: no-repeat;margin-bottom: 16rpx;}
	.right0{margin-right: 0;}
	.left0{margin-left: 0;}
	.top-tips{color: $tn-main-orange;font-size: 18rpx;margin-top: 18rpx;margin-bottom: 30rpx;letter-spacing: 1px;font-weight: bold;}
	.flex00{
	}
	.width-2{width: 47%;}
	
	.flex-2{
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	
	
	.search-box{
		height: 54rpx;
		width:100%; 
		background-color: #e5f3f9;
		//border:1px solid #FFF;
		border-radius: 27rpx;
		line-height: 54rpx;
		color: $tn-main-orange;
		font-size: 24rpx;
		padding: 0 10px;
		margin-top: 31rpx;
		.icon{
			font-size: 16px;
			margin-right: 5px;
			font-weight: bold;
		}
	}

  
  /* 内容容器 start */
  .bg-flex-shadow{
    background-color: #e2f1f9;
    z-index: 9999;
  }
  /* 内容容器 end */
  
  .mentor_list{
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  overflow: hidden;
	  padding: 6rpx 5% 16rpx;
	  float: unset;
	  
	  .logo{
		  background: url("https://www.zztengma.com/lihu/bumang/images/mentor.png") no-repeat  ;
		  background-size: contain;
		  width: 15%;
		  height: 100%;
		  float: left;
		  min-height: 161rpx;
		  margin-top: 18rpx;
	  }
	  .right{
		  float: right;
		  margin-top: 18rpx;
		  width: 83%;
		  .title{
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			.title-tag{
				width: auto!important;
				margin-right: 10rpx;
				background-color: $tn-main-orange;
				color: #FFFFFF;
				font-size: 20rpx;
				border-radius: 8rpx;
				padding: 1px 2px;
				letter-spacing: 1px;
			}
		  }
		  .list-tag{
			  margin-top: 8rpx;
			  font-size: 24rpx;
			  background: #c7c7c7;
			  border-radius: 10rpx;
			  padding: 3rpx 11rpx;
			  font-weight: bold;
			  color: $tn-main-orange;
			  width: max-content;
		  }
		  .en{font-size: 24rpx;color: #0a0a0a;font-weight: bold;margin-top: 8rpx;}
		  .location{
			  margin-top: 8rpx;
			  font-size: 24rpx;
			  font-family: "宋体";
			  .icons{width: 20px;height: 20px;display: inline;margin-right: 7rpx;font-size: 24rpx;}
			}
		  .footer{
			  margin-top: 8rpx;
			  display: flex;justify-content: space-between;
			  .price{color: $tn-main-orange;font-weight: bold;font-size: 26rpx;}
			  .order-btn{background:$tn-main-orange;color: #FFFFFF;padding: 1px;margin-top: -18rpx;border-radius: 10rpx;font-size: 26rpx;font-weight: bold;}
		  }
	  }
  }
  
  /* 用户头像 start */
  .logo-image{
    width: 116rpx;
    height: 116rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  
  .rightImage{width: 32rpx;height: 20rpx;margin-right: 5rpx}
  
  .pop_content{
	  background: #fff;border-top-right-radius: 10px;border-top-left-radius: 10px;margin-top: 18rpx;
	  padding: 23rpx 30rpx;
	  .pop_content_user{
		  display: flex;
		  justify-content: space-between;
		  padding-bottom: 30rpx;
		   border-bottom: 1px solid #c0c0c0;
		  .alogo{width: 158rpx;height: 158rpx;border-radius:10px;  border:1px solid  $tn-main-orange;margin-right: 30rpx;}
		  .alogoRight{width: 380rpx;font-size: 10px;color: #666;line-height: 23px;}
	  }
	}
	.select_nickname{font-size: 14px;color: #333;}
	.select_intro{font-size: 12px;color: #666}
	.select_tag{
		font-size: 10px;color: #666;line-height: 20rpx;
		.rightTxt{
			margin-right: 10rpx;
			display: flex;
			align-content: center;
		}}
		
	.sprice{color: $tn-main-orange;font-size: 36rpx;font-weight: bold;}
	.footer{
		background: #fff;
		padding: 20rpx;
		color: #787777;font-size: 24rpx;
		.btn{
			background-color: $tn-main-orange;
			color: #fff;
			font-size: 36rpx;
			padding: 10rpx 20rpx;
			border-radius: 10px;
			
		}
	}
	
	.footer.mentor_footer{
		padding: 0;
		.order-btn{padding: 1px !important;margin-top: 0 !important;}
	}
	
	.pop_content_topic{
		margin-top: 32rpx;
		.tn-tag-class{margin-right: 26rpx;}
		.tagSelected{border: 1px solid  $tn-main-orange;color:  $tn-main-orange;}
	}
</style>
